<template>
  <div id="Eldialog">
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="70%" top="5vh"  @close="closeDialog">
      <p style="margin-bottom: 15px;cursor: pointer;color:#5d9cec" @click="GetMaterialFileList('')">全部文件</p>
      <el-table
        :data="tableData"
        border
        style="width: 100%" height="350px">
        <el-table-column
          label="文件名"
          min-width="180">
          <template slot-scope="scope" >
            <div style="cursor:pointer;">
              <img src="../../../../images/wenjianjia.png" v-if="scope.row.IsDir"/>
              <img :src="scope.row.Root + (scope.row.Url != undefined ? scope.row.Url: '') + '/' + scope.row.Name" v-if="!scope.row.IsDir"/>
              <a v-on:click="GetMaterialFile(scope.row.IsDir, scope.row.Url != undefined ? scope.row.Url : '', scope.row.Name, scope.row.Root)">{{scope.row.Name}}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="大小"
          min-width="180">
          <template slot-scope="scope" >
            <span>{{ scope.row.Size | formatFileSize}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          min-width="230">
          <template slot-scope="scope" >
            <span>{{ scope.row.CreateTime | getLocalDate }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
  import ajax from '../../../../api/ajax/ajax'
  import { QUERY_MATERIAL_FILE } from '../../../../api/url'
    export default {
        data () {
            return {
              tableData: [],
              dialogVisible: '',
              ImageUrl: ''
            }
        },
      mounted () {
            this.GetMaterialFileList('')
      },
        methods: {
          //      选择图片
          GetMaterialFileList (UrlType) {
            this.ImageUrl = ''
            this.dialogVisible = true
            ajax.get(QUERY_MATERIAL_FILE, {url: UrlType}).then(res => {
              if (res && res.length > 0) {
                this.tableData = res
              }
            })
          },
          //      选择图片
          GetMaterialFile (isDir, Url, Name, Root) {
            let url = Url + '/' + Name
            if (isDir) {
              this.$options.methods.GetMaterialFileList.bind(this)(url, isDir)
              this.ImageUrl = url
            } else {
                this.ImageUrl = Root + url
              this.$emit('listSelecCallback', this.ImageUrl)
            }
          },
//          关闭弹窗
          closeDialog () {
            this.$emit('listSelecCallback', 'close')
          }
        },
      filters: {
        //      时间戳转日期
        getLocalDate (timestamp) {
          let newDate = new Date()
          newDate.setTime(timestamp * 1000)
          return newDate.toLocaleDateString()
        },
        //        KB转换
        formatFileSize (fileSize) {
          if (fileSize === 0) {
            return '-'
          } else if (fileSize < 1024) {
            return fileSize + 'B'
          } else if (fileSize < (1024 * 1024)) {
            let temp = fileSize / 1024
            temp = temp.toFixed(2)
            return temp + 'KB'
          } else if (fileSize < (1024 * 1024 * 1024)) {
            let temp = fileSize / (1024 * 1024)
            temp = temp.toFixed(2)
            return temp + 'MB'
          } else {
            let temp = fileSize / (1024 * 1024 * 1024)
            temp = temp.toFixed(2)
            return temp + 'GB'
          }
        }
      }
    }
</script>
<style lang="stylus">
  #Eldialog
    img
      height 30px
      max-width 50px
      vertical-align middle
</style>
